<template>
    <div class="Navigation">
        <div class="Navigation-content">
            <div class="Navigation-fast" @click="NavigationShow" v-if="!show">
                <img src="../assets/ic_tabs.png" alt="">
                <p>快速导航</p>
            </div>
            <div class="Navigation-clear" @click="NavigationShow" v-if="show">
                <p><img src="../assets/tabbar/ic_clear_img.png" alt=""></p>
                <ul class="Navigation-list">
                    <li @click="goHome"><img src="../assets/tabbar/ic_tabsGrunp(5).png" alt=""></li>
                    <li @click="goClassify"><img src="../assets/tabbar/ic_tabsGrunp(3).png" alt=""></li>
                    <li @click="goShopping"><img src="../assets/tabbar/ic_tabsGrunp(4).png" alt=""></li>
                    <li @click="goMy"><img src="../assets/tabbar/ic_tabsGrunp(6).png" alt=""></li>
                    <li @click="goShoplist"><img src="../assets/tabbar/ic_tabsGrunp(1).png" alt=""></li>
                </ul>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:false,
        }
    },
    methods:{
        NavigationShow(){
            this.show=!this.show;
        },
        goHome(){
            this.$router.push('/Home')
        },
        goClassify(){
            this.$router.push('/classify')
        },
        goShopping(){
            this.$router.push('/shopping')
        },
        goMy(){
            this.$router.push('/my')
        },
        goShoplist(){
            this.$router.push('/shopList')
        },
    }
}
</script>
<style scoped lang="scss">
.Navigation-content{
    position: fixed;
    right: 0.22rem;
    bottom: 0.77rem;
    z-index: 999;
    .Navigation-fast{
        position: relative;
        img{
            width: 0.45rem;
            height: 0.45rem;
            
        }
        p{
            font-size: 0.13rem;
            color: #fff;
            position: absolute;
            left: 20%;
            top: 10%;

        }
    }
    .Navigation-clear{
        width: 1.6rem;
        height: 1.6rem;
        position: relative;
        p{
            position: absolute;
            bottom: 0;
            right: 0;
            height: 0.35rem;
            img{
                width: 0.35rem;
                height: 0.35rem;
            }
        }
        .Navigation-list{
            li{
                width: 0.35rem;
                height: 0.35rem;
                background: rgba(3, 3, 3, 0.4);
                border-radius: 50%;
                text-align: center;
                line-height: 0.4rem;
                position: absolute;
                img{
                    width: 0.17rem;
                    height: 0.17rem;
                }
            }
            li:nth-of-type(1){
                top: 0.05rem;
                right: 0.1rem;
            }
            li:nth-of-type(2){
                top: 0.25rem;
                left: 45%;
            }
            li:nth-of-type(3){
                top: 0.5rem;
                left: 25%;
            }
            li:nth-of-type(4){
                bottom: 25%;
                left: 0.15rem;
            }
            li:nth-of-type(5){
                bottom:0;
                left: 0;
            }
        }
    }
}
</style>
